<template>
  <div class="common-layout" style="text-align: center">
    <el-container>
      <el-header>
        <h1>ZH信息管理系统</h1>
      </el-header>
      <el-main style="height: auto">
        <el-table
          :data="tableData"
          style="text-align: center; width: 100%"
          max-height="550"
        >
          <el-table-column prop="id" label="Id号" width="200" />
          <el-table-column prop="name" label="姓名" width="250" />
          <el-table-column prop="department" label="部门" width="100" />
          <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope.row)"
              >
                删除成员
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <br />
        <br />
        <el-button class="el-button-primary" type="primary" style="width: 100%"
        @click="add()"
          >添加成员</el-button
        >
      </el-main>
      <h1>{{ currentTime }}</h1>
      <el-footer>chuyangc © 2022-9999 保留所有权利</el-footer>
    </el-container>
    <RouterView></RouterView>
  </div>
</template>

<script>
import { findAll, delInfo, addInfo } from "@/api/info.api"
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      timer: "", //定义一个定时器的变量
      currentTime: new Date(), // 获取当前时间
      tableData: [],
    };
  },
  created() {
    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function () {
      _this.currentTime = //修改数据date
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ": " +
        new Date().getSeconds();
    }, 1000);
    findAll().then((response) => {
      if (response) {
        _this.tableData = response.data;
      } else {
        _this.$message.error("系统出错");
      }
    });
  },
  methods: {
    deleteRow(index) {
      let _this = this;
      delInfo(index.id).then((response) => {
        if (response) {
          _this.$message('这是一条消息提示');
          location.reload();
        } else {
          _this.$message.error("删除失败!");
        }
      });
    },
    add() {
      this.$router.push('/addinfo')
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
};
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
